/**
 * 统一管理指令集
 */
const direactives = {
  // v-text 指令处理函数
  textUpdater(node, value, key) {
    node.textContent = value

    // 创建watcher对象, 当数据变化时更新视图
    new Watcher(this.vm, key, newval => {
      node.textContent = newval
    })
  },

  // v-model 指令处理函数
  modelUpdater(node, value, key) {
    node.value = value

    // 创建watcher对象, 当数据变化时更新视图
    new Watcher(this.vm, key, newval => {
      node.value = newval
    })

    // 双向绑定
    node.addEventListener('input', () => {
      this.vm[key] = node.value
    })
  },

  // v-html 指令处理函数
  htmlUpdater(node, value, key) {
    // 根据官方文档，v-html 为替换 innerHTML 内容的指令
    node.innerHTML = value
    // 创建watcher对象, 当数据变化时更新视图
    new Watcher(this.vm, key, newval => {
      node.innerHTML = newval
    })
  },
  // v-on 指令处理函数
  onUpdater(node, value, key, argument) {
    // 判断值存在并且是函数
    value && typeof value === 'function'
    node.addEventListener(argument, e => value(e))
    // 限定一下 watcher 观察的键值，避免多个事件绑定出现覆盖
    new Watcher(this.vm, `${key}_${argument}`, newval => {
      // 先清除原绑定的监听回调
      node.removeEventListener(argument)
      // 判断值存在并且是函数
      newval && typeof newval === 'function'
      node.addEventListener(argument, e => newval(e))
    })
  }
}